<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to First chief PHP Framework</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=8,9,10" />   
        <meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />

        <!-- begin custom code -->
        <!-- dojo css -->
        <link rel="stylesheet" href="../../../dojo-release-1.8.3/dijit/themes/claro/claro.css" />
        <link rel="stylesheet" href="../../../dojo-release-1.8.3/dojo/resources/dojo.css" />
        <link rel="stylesheet" href="../../../dojo-release-1.8.3/dojox/layout/resources/ToggleSplitter.css" />  
        <link rel="stylesheet" href="../../../dojo-release-1.8.3/dojox/layout/resources/FloatingPane.css">	
        <link rel="stylesheet" href="../../../dojo-release-1.8.3/dojox/layout/resources/ResizeHandle.css">
        <link rel="stylesheet" href="../../../dojo-release-1.8.3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />
        <link rel="stylesheet" href="../../../dojo-release-1.8.3/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" />
        <link rel="stylesheet" href="../../../dojo-release-1.8.3/dijit/themes/claro/document.css" />

        <!-- external css -->
        <link rel="stylesheet" href="../../../dojo-release-1.8.3/cbtree/themes/claro/claro.css" />


        <!-- required: dojo.js -->
        <script type="text/javascript">
            var dojoConfig = {
                parseOnLoad: true,
                locale: "th",
                packages: [
                    { name: "dojo", location: "//localhost/dojo-release-1.8.3/dojo" },
                    { name: "dijit", location: "//localhost/dojo-release-1.8.3/dijit" },
                    { name: "dojox", location: "//localhost/dojo-release-1.8.3/dojox" },
                    { name: "cbtree", location: "//localhost/dojo-release-1.8.3/cbtree" }
                ]
            };
            console.log("dojoConfig");
        </script>

        <!-- Load dojo, dijit and cbtree -->
        <script type="text/javascript" src="//localhost/dojo-release-1.8.3/dojo/dojo.js"></script>

        <!-- external js -->
        <script type="text/javascript" src="../../jslib/requires.js"></script>
        <script type="text/javascript" src="../../jslib/common.js"></script>
        <script type="text/javascript" src="../../jslib/dojo-lib.js"></script>
        <script type="text/javascript" src="../../jslib/dojo-util.js"></script>
        <script type="text/javascript" src="../../jslib/generic.js"></script>
        <script type="text/javascript" src="../../jslib/utils.js"></script>

        <script type="text/javascript">
            // Load all common module.  ���config server ��� cross domain ������ ��ͧ����������� requires.js
            require([ "dijit/layout/AccordionContainer",
                "dijit/layout/BorderContainer",
                "dijit/layout/TabContainer",
                "dijit/layout/ContentPane",
                "dijit/form/Button",
                "dijit/form/CheckBox",
                "dijit/TitlePane",
                "dijit/Tooltip",
                "dijit/tree/dndSource",
                "dojox/form/TriStateCheckBox",
                "dojox/layout/TableContainer"
            ]);
			  
            //dojo.require("dojo.parser");  // scan page for widgets and instantiate them
            dojo.require("dojo.data.ItemFileWriteStore");
            dojo.require("dijit.dijit"); // optimize: load dijit layer
            dojo.require("cbtree.Tree");
            dojo.require("cbtree.models.ForestStoreModel");
            dojo.require("dijit.ColorPalette");
            dojo.require("dijit.Menu");
            dojo.require("dijit.MenuItem");
            dojo.require("dijit.PopupMenuItem");
            dojo.require("dojox.grid.LazyTreeGrid");
            dojo.require("dijit.tree.ForestStoreModel");
            dojo.require("dojox.layout.ToggleSplitter");
            dojo.require("dojox.layout.FloatingPane"); 
        </script>

        <script type="text/javascript" src="scripts/index.js"></script>
        <!-- end custom code -->
    </head>
    <body class="claro">
        <div dojoType="dijit.layout.ContentPane" style="margin: 0; padding: 0; border: none; overflow-x: hidden;">
            <b>PHP Framework by First Chief.</b>
            <button data-dojo-type="dijit.form.Button" data-dojo-props="" type="button">
                add
                <script type="dojo/method" event="onClick" args="e">
                    openAddSomeTableDialog();
                </script>
            </button>
            <div dojoType="dijit.form.TextBox" id='searchInSomeTableGrid' placeHolder="ค้นหาจากรายการที่แสดง" trim="true">
                <script type="dojo/method" event="onKeyPress" args="e">
                    if(e.keyCode == dojo.keys.ENTER){

                        var queryStr = this.get("displayedValue");
                        var gridId = 'someTableGrid';
                        
                        var attributes = new Array();
                        attributes[0] = 'my_key';
                        attributes[1] = 'my_val';
                        attributes[2] = 'update_time';					 							

                        lib = new DojoLib();
                        lib.filterGridByTextbox(attributes, 'searchInSomeTableGrid', gridId);
                    }
                </script>
            </div>

            <table dojoType="dojox.grid.EnhancedGrid" id="someTableGrid"
                   escapeHTMLInData="false" style="width: 100%;" autoHeight="true"
                   plugins="{nestedSorting:false,indirectSelection: false,pagination:true}">
                <thead>
                    <tr>
                        <th field="id" hidden="true"></th>
                        <th field="my_key" width="20%">key</th>
                        <th field="my_val" width="20%">val</th>
                        <th field="update_time" width="40%">time</th>
                        <th field="id" width="20%" formatter="displayEditAndDeleteBtn">&nbsp;</th>
                    </tr>
                </thead>  
            </table>

            <script type="dojo/method">
                initialSomeTableGrid();
            </script>
        </div>
    </body>
</html>
